<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="User" name="1"><Canvas /></el-tab-pane>
    <el-tab-pane label="vueCanvas" name="2"><VueCanvas /></el-tab-pane>
    <el-tab-pane label="ClockCanvas" name="3"><ClockCanvas /></el-tab-pane>
    <el-tab-pane label="GridLayout" name="4"> <GridLayout /></el-tab-pane>
    <el-tab-pane label="VxeTable" name="5"><VxeTable /></el-tab-pane>
    <el-tab-pane label="LowComponent" name="6" class="w-full h-full">
      <LowComponent />
    </el-tab-pane>
    <el-tab-pane label="TabTest" name="7">
      <TabTest />
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import type { TabsPaneContext } from "element-plus"
import Canvas from "./components/Canvas.vue"
import VueCanvas from "./components/VueCanvas.vue"
import ClockCanvas from "./components/ClockCanvas.vue"
import GridLayout from "./components/GridLayout.vue"
import VxeTable from "./components/VxeTable.vue"
import LowComponent from "./components/lowComponent.vue"
import TabTest from "./components/TabTest.vue"
const activeName = ref("6")

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>
<style lang="scss" scoped></style>
